<!doctype html>
<html class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="index">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/assets/css/amazeui.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <style type="text/css">
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 30%;
            background-color: #fff;
        }

        #editUserInfo:hover {
            cursor: pointer;
        }

        .edit_name {
            width: 80px;
            float: left;
            display: inline-block;
            margin-bottom: .5rem;
            margin-left: 18px;
            line-height: 38px;
        }

        .edit_input {
            float: left;
            display: block;
            width: 60%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn {
            cursor: pointer;
            -webkit-appearance: button;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            float: right;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            margin-right: 20px;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn_close {
            margin-right: 20px;

        }

        .edit_btn_commit {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>


<body>
<@common.header/>

<div class="am-cf admin-main">

<@common.slide/>
</div>

<div class=" admin-content">

<@common.headers/>

    <div class="admin-biaogelist">

        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on">商品列表详情</ul>

            <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">商品列表</a></dl>




        </div>
        <form action="/product/withSelected" method="get">
            <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
                <ul>
                    <li>
                        <div class="am-btn-group am-btn-group-xs">
                            <select id="productStatus" name="productStatus"
                                    data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}">
                                <option value="">在售状态</option>
                                <option value="1">在售</option>
                                <option value="2">下架</option>
                            </select>
                        </div>
                    </li>

                    <li style="margin-right: 0;">
                        <span class="tubiao am-icon-calendar"></span>
                        <input type="text" id="beginTime" name="beginTime"
                               class="am-form-field am-input-sm am-input-zm  am-icon-calendar"
                               placeholder="开始日期" data-am-datepicker="{theme: 'success',}" readonly/>
                    </li>
                    <li style="margin-left: -4px;">
                        <span class="tubiao am-icon-calendar"></span>
                        <input type="text" id="endTime" name="endTime" class="am-form-field am-input-sm am-input-zm  am-icon-calendar"
                               placeholder="结束日期" data-am-datepicker="{theme: 'success',}" readonly/>
                    </li>

                    <li style="margin-left: -10px;">
                        <div class="am-btn-group am-btn-group-xs">
                            <select id="productCategory" name="productCategory"
                                    data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}">
                                <option value="">产品分类</option>
                            <#list topCategoryList as topCategoryList>
                            <option value="${topCategoryList.topCategoryId}">${topCategoryList.topCategoryName}</option>
                            </#list>
                            </select>
                        </div>
                    </li>
                    <li><input type="text" class="am-form-field am-input-sm am-input-xm" id="keyWords" name="keyWords"
                               placeholder="产品关键词搜索"/></li>
                    <li>
                        <button type="submit" class="am-btn am-radius am-btn-xs am-btn-success"
                                style="margin-top: -1px;">
                            搜索
                        </button>
                    </li>
                </ul>
            </div>
        </form>

        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">

                    <th class="table-id">ID</th>
                    <th class="table-type">产品名</th>
                    <th class="table-type">库存</th>
                    <th class="table-type">单价</th>
                    <th class="table-type">颜色</th>
                    <th class="table-type">三原色</th>
                    <th class="table-type">版本</th>
                    <th class="table-type">产品描述</th>
                    <th class="table-type">是否/轮播</th>
                    <th class="table-type">是否/明星产品</th>
                    <th class="table-author am-hide-sm-only">上架/下架</th>
                    <th class="table-date am-hide-sm-only">添加日期</th>
                    <th class="table-date am-hide-sm-only">修改日期</th>
                    <th width="163px" class="table-set">操作</th>
                </tr>
                </thead>
                <tbody id="userInfo">
                <#list pageInfo.list as pageInfo>
                <tr>


                    <td>${pageInfo.secondCategoryId}</td>
                    <td>${pageInfo.secondCategoryName}</td>
                    <td>${pageInfo.quantity}</td>
                    <td>${pageInfo.versionPrice?c}</td>
                    <td>${pageInfo.colorName}</td>
                    <td>${pageInfo.colorCode}</td>
                    <td>${pageInfo.versionName}</td>
                    <td>${pageInfo.productDesc}</td>
                    <td>${(pageInfo.isHotProduct == 1)?string("是","否")}</td>
                    <td>${(pageInfo.isStartProduct == 1)?string("是","否")}</td>
                    <td>${(pageInfo.status == 1)?string('在售','下架')}
                    </td>

                    <td class="am-hide-sm-only">${pageInfo.createTime?string("yyyy-MM-dd HH:mm:ss")}</td>
                    <td class="am-hide-sm-only">${pageInfo.updateTime?string("yyyy-MM-dd HH:mm:ss")}</td>
                    <td>
                        <input type="hidden" id="secondCategoryId" value="${pageInfo.secondCategoryId}">
                        <input type="hidden" id="peoductDesc" value="${pageInfo.productDesc}">
                        <input type="hidden" id="secondCategoryName" value="${pageInfo.secondCategoryName}">
                        <input type="hidden" id="quantity" value="${pageInfo.quantity}">
                        <input type="hidden" id="versionPrice" value="${pageInfo.versionPrice?c}">
                        <input type="hidden" id="colorCode" value="${pageInfo.colorName}">
                        <div id="editInformation" class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"><span
                                class="am-icon-pencil-square-o"></span></div>
                        <div id="deleteProduct" class="am-btn am-btn-default am-btn-xs am-text-danger am-round"><span
                                class="am-icon-trash-o"></span></div>


                    </td>
                </tr>
                </#list>
                </tbody>
            </table>

            <div class="am-btn-group am-btn-group-xs">

            </div>

            <ul class="am-pagination am-fr">
                    <#if pageInfo.hasPreviousPage>
                    <li><a href="/product/getAll?pageNum=${pageInfo.prePage}">«</a></li>
                    </#if>
                     <#list pageInfo.navigatepageNums as page>
                    <li><a href="/product/getAll?pageNum=${page}">${page}</a></li>
                     </#list>
                    <#if pageInfo.hasNextPage>
                    <li><a href="/product/getAll?pageNum=${pageInfo.nextPage}">»</a></li>
                    </#if>
            </ul>


            <hr/>
            <p>注：.....</p>
        </form>


        <div class="foods">
            <dl>
                <a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a>
            </dl>
        </div>


    </div>

</div>

<#--修改产品信息-->
<div id="">
    <div id="editUserInfo" class="bg-model waaibiankuang">

        <div class='content neibiankuang'>
            <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">编辑商品信息</h4>
            </div>


            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">商品库存：</label>
                <input type="text" style="font-size: 14px; height: 40px;"  class="edit_input"
                       id="editUserEmail" name="editUserEmail">
            </div>



            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">商品描述：</label>
                <input type="text" style="font-size: 14px; height: 40px;"  class="edit_input"
                       id="peoductDescs" name="peoductDescs">
            </div>

            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">是否轮播：</label>
                <select name="editUserStatus" style="height: 40px;font-size: 14px;  width: 276px;" id="isLunBo">
                    <option value="1">是</option>
                    <option value="2">否</option>
                </select>
            </div>

            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">是否热门：</label>
                <select name="editUserStatus" style="height: 40px;font-size: 14px;  width: 276px;" id="isHotProduct">
                    <option value="1">是</option>
                    <option value="2">否</option>
                </select>
            </div>


            <div style="margin: 10px;height: 42px">
                <label id="" class="edit_name">是否在售：</label>
                <select name="editUserStatus" style="height: 40px;font-size: 14px;  width: 276px;" id="isSell">
                    <option value="1">在售</option>
                    <option value="2">下架</option>
                </select>
            </div>

            <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <button type="button" id="editUserInfoSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">
                    修改
                </button>
                <button type="button" class="edit_btn edit_btn_close" id="editUserInfoClose">关闭</button>
            </div>
            　　
        </div>
    </div>
</div>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/polyfill/rem.min.js"></script>
<script src="/assets/js/polyfill/respond.min.js"></script>
<script src="/assets/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/amazeui.min.js"></script>
<!--<![endif]-->
<script type="application/javascript">
    $(document).ready(function () {
        var secondCategoryId;
        var colorCode;
        // 获取到事件
        $("#userInfo").on('click', 'span[id^="nouse"]', function () {
            alert("点下其他的试试^_^");
        });


        /**
         * 修改
         */

        // 获取到修改事件
        $("#userInfo").on('click', '#editInformation', function () {
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
            secondCategoryId = $(this).prevAll("#secondCategoryId").val();
            var userName = $(this).prevAll("#secondCategoryName").val();
            var userEmail = $(this).prevAll("#quantity").val();
            var userPhone = $(this).prevAll("#versionPrice").val();
            colorCode = $(this).prevAll("#colorCode").val();
            var peoductDesc = $(this).prevAll("#peoductDesc").val();
            $("#editUserName").val(userName);
            $("#editUserEmail").val(userEmail);
            $("#editUserPhone").val(userPhone);
            $("#peoductDescs").val(peoductDesc)


        });
        // 修改事件关闭模态框
        $("#editUserInfoClose").click(function () {
            $("#editUserInfo").hide();
            //显示窗体的滚动条
            $("body").css({"overflow": "visible"});
        });
        // 提交修改信息
        $("#editUserInfoSubmit").click(function () {
            var editProductQuantity =$("#editUserEmail").val();
            var editLunBoStatus =$("#isLunBo").val();
            var editHotStatus  =$("#isHotProduct").val();
            var editSellStatus = $("#isSell").val();
            var productDescs = $("#peoductDescs").val();



            $.ajax({
                url:'/product/updateProduct?secondCategoryId=' + secondCategoryId +
                        '&editProductQuantity=' + editProductQuantity + '&editLunBoStatus=' + editLunBoStatus
                        + '&editHotStatus=' + editHotStatus + '&editSellStatus=' + editSellStatus
                        + '&productDescs=' + productDescs+ '&colorCode=' + colorCode,
                success:function (result) {
                    if (result.stauts == -10) {
                        alert("更新失败");
                        return false;
                    }
                    window.location.reload();
                }
            })

        });

        /**
         * 删除
         */
        // 获取到删除事件
        $("#userInfo").on('click', '#deleteProduct', function () {
           if (!confirm("确认删除？")) {
               return false;
           }
            $.ajax({
                url:'/product/deleteProduct?secondCategoryId=' + secondCategoryId,
                success:function (result) {
                    if(result.status == -10) {
                        alert("删除失败");
                        return false;
                    }
                    window.location.reload();
                }
            });
        });

        $("#addMember").click(function () {
            alert("电解铝");
        });


    });


</script>

</body>
</html>